import eb from "../../../../assets/images/digitzation/eb.png";
import * as echarts from "echarts";
export function leftOneData(params) {
    var trafficWay = [
        {
            name: "全国人大代表",
            value: 0,
            id: 1
        },
        {
            name: "陕西省人大代表",
            value: 0,
            id: 2
        },
        {
            name: "延安市人大代表",
            value: 0,
            id: 3
        },
        {
            name: "志丹县人大代表",
            value: 0,
            id: 4
        },
    ];
    params.length > 0 && trafficWay.forEach((item) => {
        for (var i = 0; i < params.length; i++) {
            if (item.id == params[i].levelId) {
                item.value = params[i].count;
            }
        }
    });
    var nameArray = trafficWay.map((item) => {
        return item.name;
    });
    var data = [];
    var color = [
        "#2ca1ff",
        "#0adbfa",
        "#febe13",
        "#65e5dd",
        "#7b2cff",
        "#fd5151",
        "#f071ff",
        "#85f67a",
    ];
    for (var i = 0; i < trafficWay.length; i++) {
        data.push(
            {
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 8,
                        shadowBlur: 20,

                        borderRadius: 20,
                        borderColor: color[i],
                        shadowColor: color[i],
                    },
                },
            },
            {
                value: 2,
                name: "",
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0, 0, 0, 0)",
                        borderColor: "rgba(0, 0, 0, 0)",
                        borderWidth: 0,
                    },
                },
            }
        );
    }
    var seriesOption = [
        {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [100, 105],
            width: 280,
            height: 252,
            hoverAnimation: false,
            center: ["40%", "38%"],
            left: "20%",
            top: "center",
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                },
            },
            data: data,
        },
    ];

    let option = {
        color: color,
        title: {
            text: "代表层级",
            left: "38%",
            top: "38%",

            textStyle: {
                color: "#c1cadf",
                fontSize: 24,
                fontWeight: "800",
            },
        },
        graphic: {
            elements: [
                {
                    type: "image",
                    z: 1,
                    style: {
                        image: eb,
                        width: 280,
                        height: 252,
                    },
                    left: "12%",
                    top: "5%",
                },
            ],
        },
        tooltip: {
            trigger: "item",
            textStyle: {
                fontSize: 18, // 字体大小
                fontWeight: "bold", // 字体粗细
                color: "#ffffff", // 字体颜色
            },
        },
        legend: [
            {
                icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                bottom: "5%",
                left: "5%",
                data: nameArray.slice(0, 2),
                textStyle: {
                    color: "#fff",
                    fontSize: 16,
                    fontWeight: "800",
                },
                orient: "vertical",
            },
            {
                icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                bottom: "5%",
                left: "55%",
                data: nameArray.slice(2, 4),
                textStyle: {
                    color: "#fff",
                    fontSize: 16,
                    fontWeight: "800",
                },
                orient: "vertical",
            },
        ],

        toolbox: {
            show: false,
        },
        series: seriesOption,
    }
    return params.length > 0 ? option : null;
}
export function leftTwoData(params, type) {

    let trafficWay1 = [
        {
            name: "教科文卫",
            value: 0,
            id: 1
        },
        {
            name: "农业水利",
            value: 0,
            id: 2
        },
        {
            name: "财政金融",
            value: 0,
            id: 3
        },
        {
            name: "生态环境",
            value: 0,
            id: 4
        },
        {
            name: "工业交通",
            value: 0,
            id: 5
        },
    ];
    params.length > 0 && trafficWay1.forEach((item) => {
        for (var i = 0; i < params.length; i++) {
            if (item.id == params[i].type) {
                item.value = params[i].count;
            }
        }
    });
    console.log(trafficWay1, 88);
    var data1 = [];
    var color = ["#006ced", "#00cfff", "#ffe000", "#ff5b00", "#f071ff"];
    for (var i = 0; i < trafficWay1.length; i++) {
        data1.push(
            {
                value: trafficWay1[i].value,
                name: trafficWay1[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i],
                    },
                },
            },
            {
                value: 0.2,
                name: "",
                title: "间隔",
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0, 0, 0, 0)",
                        borderColor: "rgba(0, 0, 0, 0)",
                        borderWidth: 0,
                    },
                },
            }
        );
    }
    function _dashed() {
        let dataArr = [];
        for (var i = 0; i < 10; i++) {
            if (i % 2 === 0) {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 10,
                    itemStyle: {
                        normal: {
                            color: "rgb(0,0,0,0)",
                        },
                    },
                });
            } else {
                dataArr.push({
                    name: (i + 1).toString(),
                    value: 20,
                    itemStyle: {
                        normal: {
                            color: "rgb(0,0,0,0)",
                            borderWidth: 2,
                            borderColor: "rgba(255,215,0,1)",
                        },
                    },
                });
            }
        }
        return dataArr;
    }
    let option = {
        color: color,
        title: [
            {
                text: "审查分类",
                top: type ? "50%" : "52%",
                left: type ? "50%" : "50% ",
                textAlign: "center",
                textStyle: {
                    color: "#c1cadf",
                    fontSize: type ? 20 : 28,
                    fontWeight: "800",
                },
            },
        ],
        tooltip: {
            trigger: "item",
            textStyle: {
                fontSize: 18, // 字体大小
                fontWeight: "bold", // 字体粗细
                color: "#ffffff", // 字体颜色
            },
            formatter: function (params) {
                // params 是包含当前数据信息的对象
                // 你可以根据需要显示的信息来自定义这里的内容
                if (params.value != 0.2) {
                    return params.marker + params.name + ':' + params.value
                }
            }

        },
        legend: {
            top: "5%",
            left: "center",
            textStyle: {
                fontSize: 14, // 字体大小
                fontWeight: "bold", // 字体粗细
                color: "#ffffff", // 字体颜色
            },
            data: ["教科文卫", "农业水利", "财政金融", "生态环境", "工业交通"],
            orient: "horizontal",
        },
        series: [
            //安排出运
            {
                name: "",
                type: "pie",
                clockWise: false,
                center: ["50%", "55%"],
                radius: ["40%", "50%"],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: "outside",
                            color: "#c1cadf",
                            fontSize: 16,
                            formatter: function (params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < trafficWay1.length; i++) {
                                    total += Number(trafficWay1[i].value);
                                }

                                percent = ((params.value / total) * 100).toFixed(0);
                                if (params.name !== "") {
                                    return params.name + "\n" + "\n" + percent + "%";
                                } else {
                                    return "";
                                }
                            },
                        },
                        labelLine: {
                            length: 10,

                            show: true,
                            color: "#00ffff",
                        },
                    },
                },
                data: data1,
            },
            {
                type: "pie",
                center: ["50%", "55%"],
                radius: ["44%", "44.3%"],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: "#00cfff",
                    },
                },
                label: {
                    show: false,
                },
                data: _dashed(),
            },
        ],
    }
    return params.length > 0 ? option : null;
}
export function rightBar(params) {
    let data = [
        {
            name: "2018",
            value: 1,
            id: 1
        },
        {
            name: "2019",
            value: 4,
            id: 2
        },
        {
            name: "2020",
            value: 2,
            id: 3
        },
        {
            name: "2021",
            value: 0,
            id: 4
        },
        {
            name: "2022",
            value: 0,
            id: 5
        },
        {
            name: "2023",
            value: 2,
            id: 6
        },
        {
            name: "2024",
            value: 3,
            id: 7
        },
        
    ]
    // params.length > 0 && data.forEach((item) => {
    //     for (var i = 0; i < params.length; i++) {
    //         if (item.id == params[i].time) {
    //             item.value = params[i].count;
    //         }
    //     }
    // });
    console.log(data);
    let option = {
        grid: {
            left: "0%",
            right: "0%",
            top: "20%",
            bottom: "0%",
            containLabel: true,
        },
        legend: {
            // itemWidth: 40,
            // itemHeight: 20,
            textStyle: {
                color: "#fff",
                fontSize: 16,
                padding: [20, 0, 0, 0],
            },
            // icon: "rect",
        },
        tooltip: {
            trigger: "item",
            formatter: function (parms) {
                return (
                    parms.marker + " " + parms.name + "：" + parms.value + "万元"
                );
            },
        },
        xAxis: {
            type: "category", // category(坐标轴类型)
            data: data.map((item) => item.name),
            axisTick: {
                // 坐标轴刻度相关配置
                show: true, // 是否显示坐标轴刻度
            },
            axisLine: {
                // 坐标轴轴线相关配置
                lineStyle: {
                    // 坐标轴轴线样式
                    color: "rgba(255,255,255,0.15)", // 坐标轴轴线颜色
                },
            },
            axisLabel: {
                // 坐标轴刻度标签相关配置
                color: "#ffffff",
                fontSize: 12,
                margin: 20,
                interval: 0,
                // rotate: -30,
            },

        },
        yAxis: {
            type: "value", // value(数值轴,适用于连续数据)
            axisTick: {
                // 坐标轴刻度相关配置
                show: false, // 是否显示坐标轴刻度
            },
            axisLine: {
                // 坐标轴轴线相关配置
                show: false, // 是否显示坐标轴轴线
            },
            axisLabel: {
                // 坐标轴刻度标签相关配置
                color: "#ffffff",
                fontSize: 14,
            },
            splitLine: {
                // 坐标轴在 grid 区域中的分隔线
                lineStyle: {
                    // 分割线配置
                    color: "rgba(255,255,255,0.15)", // 分割线颜色
                },
            },
        },
        series: [
            // 底部的椭圆形(象形柱图):pictorialBar
            {
                name: "立法总数",
                type: "pictorialBar", // pictorialBar(象形柱图)
                label: {
                    // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
                    show: true, //是否显示标签
                    position: ["18", "-20"], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
                    //  position: 'center',
                    color: "#01E4FF",
                    fontSize: 14,
                },
                symbolSize: [45, 10], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
                symbolOffset: [0, 5], // 图形相对于原本位置的偏移
                z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
                itemStyle: {
                    // 图形样式
                    // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
                    // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        // 这里 offset: 0 1 ,表示从下往上的渐变色
                        {
                            offset: 0, // 0%处的颜色
                            color: "rgba(31,155,255,1)",
                        },
                        {
                            offset: 1, // 100%处的颜色
                            color: "rgba(0,229,255,1)",
                        },
                    ]),
                },
                data: data.map((item) => item.value),
            },
            // 中间的长方形柱状图(柱状图):bar
            {
                name: "立法总数",
                type: "bar", // 柱状图
                // barWidth: 40, // 柱条的宽度,不设时自适应
                barGap: "0%", // 柱子与柱子之间的距离
                itemStyle: {
                    // 图形样式
                    // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
                    // 下面就是使用线性渐变
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: "linear",
                        global: false,
                        colorStops: [
                            {
                                offset: 0, // 0%处的颜色
                                color: "rgba(0,229,255,0.5)",
                            },
                            {
                                offset: 1, // 100%处的颜色
                                color: "#1F9BFF",
                            },
                        ],
                    },
                },
                data: data.map((item) => item.value),
            },
            // 顶部的椭圆形(象形柱图):pictorialBar
            {
                name: "立法总数",
                type: "pictorialBar",
                symbolSize: [45, 10],
                symbolOffset: [0, -5],
                z: 12,
                symbolPosition: "end",
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(31,155,255,1)",
                            },
                            {
                                offset: 1,
                                color: "rgba(0,229,255,1)",
                            },
                        ],
                        false
                    ),
                },
                data: data.map((item) => item.value),
            },
        ],
    }
    return params.length > 0 ? option : null;
}

export function rightPie(params) {
    let option = {
        tooltip: {
            trigger: "item",
            textStyle: {
                fontSize: 18, // 字体大小
                fontWeight: "bold", // 字体粗细
                color: "#ffffff", // 字体颜色
            },
        },
        title: {
            text: "民意分类",
            left: "center",
            top: "47%",
            padding: [24, 0],
            textStyle: {
                color: "#c1cadf",
                fontSize: 20,
                fontWeight: "800",
            },
        },
        legend: {
            orient: "horizontal",
            icon: "circle",
            top: 20,
            x: "center",
            data: ["社工", "养老护理员", "康复师", "心理咨询师", "医生"],
            textStyle: {
                fontSize: 14, // 字体大小
                fontWeight: "bold", // 字体粗细
                color: "#ffffff", // 字体颜色
            },
        },
        series: [
            {
                name: "人员类型",
                type: "pie",
                hoverAnimation: false,
                legendHoverLink: false,
                radius: ["30%", "40%"],
                center: ["50%", "55%"],

                color: ["#006495", "#1D5F84", "#255C6D", "#3C5C67", "#40486C"],
                label: {
                    normal: {
                        position: "inner",
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                tooltip: {
                    show: false,
                },

                data: [
                    {
                        value: 100,
                        name: "",
                    },
                    {
                        value: 100,
                        name: "",
                    },
                    {
                        value: 100,
                        name: "",
                    },
                    {
                        value: 100,
                        name: "",
                    },
                    {
                        value: 100,
                        name: "",
                    },
                ],
            },
            {
                name: "人员类型",
                type: "pie",
                center: ["50%", "55%"],
                radius: ["40%", "50%"],
                color: ["#00FFFF", "#44EAB1", "#7BDD43", "#FEBE12", "#EBEC2F"],
                labelLine: {
                    normal: {
                        show: true,
                        length: 10,

                        lineStyle: {
                            width: 1,
                        },
                    },
                },
                label: {
                    normal: {
                        formatter: "{b|{b}}\n{hr|}\n{d|{d}%}",
                        rich: {
                            b: {
                                fontSize: 16,
                                color: "#fff",
                                align: "left",
                                padding: 4,
                            },
                            // hr: {
                            //   borderColor: "#12EABE",
                            //   width: "100%",
                            //   borderWidth: 2,
                            //   height: 0,
                            // },
                            d: {
                                fontSize: 16,
                                color: "#fff",
                                align: "left",
                                padding: 4,
                            },
                            c: {
                                fontSize: 16,
                                color: "#fff",
                                align: "left",
                                padding: 4,
                            },
                        },
                    },
                },
                data: [
                    {
                        value: 100,
                        name: "社工",
                    },
                    {
                        value: 100,
                        name: "养老护理员",
                    },
                    {
                        value: 100,
                        name: "康复师",
                    },
                    {
                        value: 100,
                        name: "心理咨询师",
                    },
                    {
                        value: 100,
                        name: "医生",
                    },
                ],
            },
        ],
    }
    return option
}